<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">钱包</div>
    </v-ons-toolbar>
    <div class="container">
      <!-- 头部 -->
      <div class="head">
        <h3>余额(元)</h3>
        <p>9,962.07</p>
      </div>

      <!-- 订单入口 -->
      <div class="ingress-group">
        <div class="ingress-item" @click="actionSheetVisible = true">
          <img src="../../assets/resource/consumer/wallet/icon1.png" alt="">
          <p>提现</p>
        </div>
        <div @click="enterPage({path:'/ConsumerRecharge'})" class="ingress-item">
          <img src="../../assets/resource/consumer/wallet/icon2.png" alt="">
          <p>充值</p>
        </div>
        <div @click="enterPage({path:'/ConsumerBankcardList'})" class="ingress-item">
          <img src="../../assets/resource/consumer/wallet/icon3.png" alt="">
          <p>银行卡</p>
        </div>
      </div>

      <!-- 数据列表 -->
      <div class="data-list">
        <div class="data-title">
          <p>收支明细</p>
          <p>本月支出: 0元</p>
        </div>
        <div class="data-item">
          <p>2018-1-1</p>
          <p>支出</p>
          <p>0元</p>
        </div>
        <div class="data-item">
          <p>2018-1-1</p>
          <p>支出</p>
          <p>0元</p>
        </div>
        <div class="data-item">
          <p>2018-1-1</p>
          <p>支出</p>
          <p>0元</p>
        </div>
      </div>

    </div>


    <v-ons-action-sheet
      :visible.sync="actionSheetVisible"
      cancelable
      title="提现申请"
    >
      <v-ons-action-sheet-button icon="md-square-o" @click="enterPage({path:'/ConsumerWithdrawCashToBankcard',actionSheet:true})">提现到银行卡</v-ons-action-sheet-button>
      <v-ons-action-sheet-button icon="md-square-o" @click="enterPage({path:'/ConsumerWithdrawCashToAlipay',actionSheet:true})">提现到支付宝</v-ons-action-sheet-button>
      <v-ons-action-sheet-button icon="md-square-o" @click="enterPage({path:'/ConsumerWithdrawCashToBalance',actionSheet:true})">提现到余额</v-ons-action-sheet-button>
      <v-ons-action-sheet-button icon="md-square-o" @click="actionSheetVisible = false">取消</v-ons-action-sheet-button>
    </v-ons-action-sheet>

  </v-ons-page>
</template>

<script>
    export default {
      data() {
        return {
          actionSheetVisible: false
        }
      },
      methods: {
        enterPage({path:path,actionSheet:actionSheet}){
          if(actionSheet){
            this.actionSheetVisible = false
          }
          this.$router.push({
            path:path
          });
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/wallet.less";
</style>
